<template>
  <div class="order-confirm-container">
    <!-- 配送地址组件 -->
    <DeliveryPlace />
    <!-- 商品信息 -->
    <Panel color="#F8F5F0" class="mt-20" title="包裹1">
      <!-- 商品信息 -->
      <Goods :info="goodsInfo" />
    </Panel>
    <!-- 其他信息，优惠券等 -->
    <div class="benefit">
      <!-- 优惠券 -->
      <Coupon class="area" />
      <!-- 回馈金 -->
      <Feedback class="area" />
      <!-- 礼品卡 -->
      <GiftCard class="area" />
    </div>
    <!-- 合计信息 -->
    <Summation />
  </div>
</template>

<script>
import DeliveryPlace from '@/components/order/DeliveryPlace'
import Panel from '@/components/Panel'
import Goods from '@/components/order/Goods'
import Coupon from '@/components/order/Coupon'
import Feedback from '@/components/order/Feedback'
import GiftCard from '@/components/order/GiftCard'
import Summation from '@/components/order/Summation'

export default {
  data () {
    return {
      goodsInfo: {
        name: 'asdfasd'
      }
    }
  },

  components: {
    DeliveryPlace,
    Goods,
    Panel,
    Coupon,
    Feedback,
    GiftCard,
    Summation
  }
}
</script>

<style lang="less" scoped>
@import "../../styles/variable.less";

.order-confirm-container {
  width: 1100px;
  margin: 0 auto;
  padding: 50px 0px;
  .benefit {
    background-color: @bg-grey;
    border-left: 1px solid @border-color2;
    border-right: 1px solid @border-color2;
    display: flex;
    padding: 20px 0px;
    .area {
      border-right: 1px solid @border-grey;
      flex: 1;
      &:last-child {
        border-right: 0px;
      }
    }
  }
}
</style>
